<template>
	<div class="hot-sale-wrap" v-if="hotSaleList&&hotSaleList.length>0">
		<div class="hot-sale-bg"><img src="/img/cardBg.png" alt=""/></div>
		<div class="hot-sale-title"><van-icon name="fire"/> <em>热卖推荐</em></div>
		<router-link class="hot-more" replace :to="'/shop/search?shopId='+shopId">更多 <van-icon name="arrow"/></router-link>
		<div class="hot-sale-main">
			<ul>
				<li v-for="(item,index) in hotSaleList" key="index">
					<router-link :to="{path:'/goods/detail',query:{gdsId:item.gdsId}}"><van-image :src="item.gdsImg"/></router-link>
					<router-link :to="{path:'/goods/detail',query:{gdsId:item.gdsId}}">
						<div class="goods-name">{{item.gdsName}}</div>
						<div class="price" v-if="item.agentPrice"><b>￥{{fen2Yuan(item.agentPrice as number)}}</b></div>
						<div class="price" v-else>指导价 <b>￥{{fen2Yuan(item.guidePrice as number)}}</b></div>
					</router-link>
				</li>
			</ul>
		</div>
	</div>
</template>
<style lang="scss" scoped>
.hot-sale-wrap{
	position:relative;
	margin:10px;padding:40px 10px 10px;
	border-radius: 8px;
	overflow:hidden;

	.hot-sale-bg{
		position:absolute; top:0;left:0;width:100%;height:100%;opacity:.9;background-color:var(--van-primary-color);
		img{width:100%;opacity:.3}
	}
	.hot-sale-title{
		background-color: var(--font-first-color); opacity: .8; color:var(--white-color);
		position:absolute;top:0;left:10px;height:30px;width:auto;padding:0 20px 0 16px;
		display:flex; align-items: center;font-size:16px;
		border-bottom-left-radius: 50px;border-bottom-right-radius: 50px;
		font-style: italic;
		em{font-weight: bold;}
		.van-icon{font-size:20px;margin-right:5px;color:var(--van-unicom-color);}
	}
	.hot-more{
		position:absolute;top:0;right:10px;height:30px;width:auto;display:flex;align-items:center;
		color:var(--white-color); font-size:12px; opacity: .6;
	}
	.hot-sale-main{
		display:block;overflow-x:auto; overflow-y:hidden;position:relative; z-index:1;
		height:160px; font-size:12px;
		ul{display:flex;margin:0;padding:0;height:100%;}
		li{
			display:block;margin:0 5px 0 0;padding:5px; width:calc((100vw - 75px)/3);
			background-color:var(--white-color);overflow:hidden;border-radius: 8px;
			height:160px; flex-shrink: 0;text-align:center;
			&:last-child{margin-right:0;}
			.van-image{display:block; aspect-ratio: 1;}
			img,:deep(.van-image__img){width:100%; aspect-ratio: 1; border-radius: 4px;}
			.goods-name{
				margin-top:8px;color:var(--font-second-color);
				height:28px;
				text-overflow: ellipsis;
				overflow: hidden; line-height:14px;
				word-break: break-all;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			.price{
				color:var(--van-unicom-color);margin-top:4px;
				b{font-size:14px;}
			}
		}
	}
}
</style>
<script lang="ts" setup>
import {fen2Yuan} from "@/utils/validate"
//props
const props=defineProps({
	shopId:{
		type:String,
		required:true,
	},
})
const domain = import.meta.env.VITE_DOMAIN
//data
//店铺的热卖推荐： 与PC端不同，移动端不需要分组
const hotSaleList = ref(<Array<any>>[])
hotSaleList.value=[
	{
		gdsId:'1227867',
		gdsImg:'https://www.woego.cn/woego/image/622aaf5a75e50b69f7a2b40d_140x140!.jpg',
		gdsName:'Apple iPhone 13 Pro Max',
		agentPrice:530000,
		guidePrice:580000,
	},
	{
		gdsId:'1227867',
		gdsImg:'https://www.woego.cn/woego/image/622aaf5a75e50b69f7a2b40d_140x140!.jpg',
		gdsName:'Apple iPhone 13 Pro Max',
		agentPrice:530000,
		guidePrice:580000,
	},
	{
		gdsId:'1227867',
		gdsImg:'https://www.woego.cn/woego/image/622aaf5a75e50b69f7a2b40d_140x140!.jpg',
		gdsName:'Apple iPhone 13 Pro Max',
		agentPrice:530000,
		guidePrice:580000,
	},
	{
		gdsId:'1227867',
		gdsImg:'https://www.woego.cn/woego/image/622aaf5a75e50b69f7a2b40d_140x140!.jpg',
		gdsName:'Apple iPhone 13 Pro Max',
		agentPrice:530000,
		guidePrice:580000,
	},
	{
		gdsId:'1227867',
		gdsImg:'https://www.woego.cn/woego/image/622aaf5a75e50b69f7a2b40d_140x140!.jpg',
		gdsName:'Apple iPhone 13 Pro Max',
		agentPrice:530000,
		guidePrice:580000,
	},
	{
		gdsId:'1227867',
		gdsImg:'https://www.woego.cn/woego/image/622aaf5a75e50b69f7a2b40d_140x140!.jpg',
		gdsName:'Apple iPhone 13 Pro Max Apple iPhone 13 Pro Max',
		agentPrice:530000,
		guidePrice:580000,
	},
	{
		gdsId:'1254266',
		gdsImg:'https:www.woego.cn/woego/image/6449d39e2b608d0a734b9585_140x140!.jpg',
		gdsName:'小象智能家庭医生',
		agentPrice:43000,
		guidePrice:48000,
	},
	{
		gdsId:'1254266',
		gdsImg:'https:www.woego.cn/woego/image/6449d39e2b608d0a734b9585_140x140!.jpg',
		gdsName:'小象智能家庭医生 小象智能家庭医生',
		agentPrice:43000,
		guidePrice:48000,
	},
	{
		gdsId:'1254266',
		gdsImg:'https:www.woego.cn/woego/image/6449d39e2b608d0a734b9585_140x140!.jpg',
		gdsName:'小象智能家庭医生',
		agentPrice:43000,
		guidePrice:48000,
	},
]
</script>